<template>
  <div class="hello">
    <select v-model="Province" @change="handleProv">
      <option
        v-for="province in provinces"
        :key="province.name"
        :value="province.name"
      >
        {{ province.name }}
      </option>
    </select>
    <select v-model="City" @change="handleCity">
      <option v-for="city in cities" :key="city.name" :value="city.name">
        {{ city.name }}
      </option>
    </select>
    <select v-model="Area">
      <option v-for="area in areas" :key="area.area" :value="area.area">
        {{ area }}
      </option>
    </select>
  </div>
</template>

<script>
import City from "../city";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  /**
   * 调用组建
   * @type {Object}
   */
  components: {},
  /**
   * 数据字段
   * @return {[type]} [description]
   */
  data() {
    return {
      Province: "",
      provinces: City,
      City: "",
      cities: [],
      Area: "",
      areas: [],
    };
  },
  /**
   * 页面调用函数
   * @type {Object}
   */
  methods: {
    handleProv() {
      let Province = this.provinces.find(
        (province) => province.name === this.Province
      );
      if (Province) {
        this.cities = Province.city;
      } else {
        this.cities = [];
      }
      this.City = "";
      this.areas = [];
      this.Area = "";
    },
    handleCity() {
      let City = this.cities.find((city) => city.name === this.City);
      if (City) {
        this.areas = City.area;
      } else {
        this.areas = [];
      }
      this.Area = "";
    },
  },
};
</script>
<style scoped></style>
